import * as echarts from "echarts";
import chinaJson from "@/utils/china.json";
export function barinit() {
  var chartDom = document.querySelector(".bar .chart");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    color: ["#2f89cf"], //option 中的 color 参数用于配置图表中的颜色主题。这个参数可以接受一个数组，数组中的每个元素表示一个颜色值，可以是具体的颜色名称或者十六进制颜色码。
    tooltip: {
      //tooltip配置图表的提示框样式
      trigger: "axis", //trigger 属性用于配置触发提示框的条件 可选 'item' | 'axis' | 'none'(none 没有提示框)
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      //grid 是用于配置图表的网格样式和布局的属性之一
      left: "0%", //网格左侧的距离。可以设置为像素值或百分比。
      top: "20px",
      right: "0%",
      bottom: "0%",
      containLabel: true, //是否坐标轴的刻度标签和标签。默认值为 false，表示不包含,为true 表示坐标轴跟着一起偏移
    },
    xAxis: [
      //x轴的配置，xAxis是一个数组，表示x轴的配置，这里只配置了一个x轴。
      {
        type: "category", //表示x轴的类型为类目轴，即x轴的数据是离散的。
        /* type的常用参数
            'category'：类目型，适用于离散的类目数据，例如柱状图、折线图等。
            'value'：数值型，适用于连续的数值数据，例如散点图、折线图等。
            'time'：时间型，适用于时间数据，例如时间轴图表。
            'log'：对数型，适用于对数数据，例如对数坐标轴图表。
            */
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"], //数组中的元素是x轴上的类目
        axisTick: {
          //用于配置坐标轴刻度相关的样式和行为，
          /* axisTick常用配置
            show：是否显示坐标轴刻度线，默认为true。
            alignWithLabel：是否将刻度线与标签对齐，默认为false
            interval：刻度线的显示间隔，默认为'auto' 或者一个正整数 20
            inside：刻度线是否朝内显示，默认为false。当设置为true时，刻度线会朝坐标轴内部显示；当设置为false时，刻度线会朝坐标轴外部显示。
            length：刻度线的长度，默认为5。
            */
          alignWithLabel: true, //是否将刻度线与标签对齐
          show: true, //是否显示坐标轴刻度线
          interval: "auto",
          inside: false,
          length: 5,
        },
        axisLabel: {//用于配置坐标轴刻度标签的样式
          /* 
          show：是否显示坐标轴标签，默认为true。
          rotate：标签旋转的角度，默认为0。可以设置为正值表示顺时针旋转，负值表示逆时针旋转。
          interval：标签的显示间隔，默认为'auto'。可以设置为一个正整数，表示每隔几个标签显示一个；或者设置为'auto'，表示自动计算间隔。
          margin：标签与轴线之间的距离，默认为8。
          formatter：标签的格式化函数。可以是一个函数或者字符串，用于自定义标签的展示方式。 
          */
          show:true,
          rotate:0,
          interval:'auto',
          margin:10,
          textStyle: {//坐标轴标签的样式
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
              fontWeight: 'normal' 
          }
      },
      axisLine: {//用于配置坐标轴线的样式。通过axisLine参数，你可以设置坐标轴线的颜色、宽度、类型等属性。
        show: true,//show: false表示不显示x轴线。默认为false
        lineStyle: { 
            color: 'rgba(255,255,255,.6)', // 坐标轴线的颜色
            width: 0, // 坐标轴线的宽度
            type: 'solid' // 坐标轴线的类型，可选值为 'solid', 'dashed', 'dotted'
          }
    }
      },
    ],
    yAxis: [//y轴配置
      {
        type: "value",//value类型
        axisLabel: {//用于配置纵坐标轴刻度的样式
          textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
          }
      },
      axisLine: {//用于配置坐标轴线的样式。通过axisLine参数，你可以设置坐标轴线的颜色、宽度、类型等属性。
        show: false,//默认为false
        lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 10,
            type: "solid"
        }
    },
      },
    ],
    series: [{
      name: "购买人数",
      type: "bar",
      barWidth: "50%",
      data: [1000, 300, 300, 900, 1500, 1200, 2000],
      itemStyle: {
        borderRadius : 5
      }
  }]
  };

  option && myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
});
    // 数据变化
    var dataAll = [{
      year: "一月",
      data: [1000, 300, 300, 900, 1500, 1200, 2000],
  },
  {
      year: "二月",
      data: [3000, 2000, 1000, 800, 1800, 1400, 700]
  }
];

document.querySelector(".bar .panel_title").addEventListener("click", function(e) {
  console.log('e',e.target);
  var i = e.target == this.children[0] ? 0 : 1;
  option.series[0].data = dataAll[i].data;
  myChart.setOption(option);
});
}


export function lineinit(){

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector(".line .chart"));

      // (1)准备数据
      var data = {
          year: [
              [104, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
              [100, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
          ]
      };
  
      // 2. 指定配置和数据
      var option = {
        title: {
          text: '销量趋势',
          textStyle:{
           color:'white',
           fontSize:'14',
          }
        },
          color: ["#00f2f1", "#ed3f35"],
          tooltip: {
              // 通过坐标轴来触发
              trigger: "axis"
          },
          legend: {//示例
              // 距离容器10%
              right: "0%",
              // 修饰图例文字的颜色
              textStyle: {
                  color: "#4c9bfd"
              }
              // 如果series 里面设置了name，此时图例组件的data可以省略
              // data: ["邮件营销", "联盟广告"]
          },
          grid: {//布局
              top: "20%",
              left: "0%",
              right: "1%",
              bottom: "0%",
              show: true,
              borderColor: "#012f4a",
              containLabel: true
          },
  
          xAxis: {
              type: "category",
              boundaryGap: false,
              data: [
                  "1月",
                  "2月",
                  "3月",
                  "4月",
                  "5月",
                  "6月",
                  "7月",
                  "8月",
                  "9月",
                  "10月",
                  "11月",
                  "12月"
              ],
              // 去除刻度
              axisTick: {
                  show: true
              },
              // 修饰刻度标签的颜色
              axisLabel: {
                  color: "rgba(255,255,255,.7)",
                  // margin:4,
              },
              // 去除x坐标轴的颜色
              axisLine: {
                  show: false
              }
          },
          yAxis: {
              type: "value",
              // 去除刻度
              axisTick: {
                  show: false
              },
              // 修饰刻度标签的颜色
              axisLabel: {
                  color: "rgba(255,255,255,.7)",
                  
              },
              // 修改y轴分割线的颜色
              splitLine: {
                  lineStyle: {
                      color: "#012f4a"
                  }
              }
          },
          series: [{
                  name: "小程序",
                  type: "line",
                  stack: "总量",
                  // 是否让线条圆滑显示
                  smooth: true,
                  data: data.year[0]
              },
              {
                  name: "App",
                  type: "line",
                  stack: "总量",
                  smooth: true,
                  data: data.year[1]
              }
          ]
      };
      // 3. 把配置和数据给实例对象
      myChart.setOption(option);
  
      // 重新把配置好的新数据给实例对象
      myChart.setOption(option);
      window.addEventListener("resize", function() {
          myChart.resize();
      });

}

export function pieinit(){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".pie .chart"));

   var option = {
    title: {
      text: '年龄段分析',
      textStyle:{
       color:'white',
       fontSize:'14',
      }
    },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: function(p) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [{
            name: "年龄分布",
            type: "pie",
            center: ["50%", "42%"],
            radius: ["40%", "70%"],

            color: [
                "#f3a694",
                "#ee7959",
                "#99806c",
                "#ffee6f",
                "#615ea8",
                "#06b4ab",
                "#2e59a7",
                "#8b7042",
                "#4c8045"
            ],

            labelLine: {
              show: false
            },
            label: {
                show: false
            },
            labelLine: {
              show: false,
            },
            data: [{
                    value: 1,
                    name: "0岁以下"
                },
                {
                    value: 4,
                    name: "20-29岁"
                },
                {
                    value: 2,
                    name: "30-39岁"
                },
                {
                    value: 2,
                    name: "40-49岁"
                },
                {
                    value: 1,
                    name: "50岁以上"
                }
            ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
}

export function barTwoinit(){

  var myChart = echarts.init(document.querySelector(".bar1 .chart"));

  var data = [90, 80, 75, 65, 35];
  var titlename = ["衣服", "手机", "鞋子", "家具", "洗护"];
  var valdata = ["淘宝", "京东", "拼多多", "唯品会", "其他"];
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
 var option = {
      //图标位置
      title:{
        text: '购买种类分析',
        textStyle:{
         color:'white',
         fontSize:'14',
        }
      },
      tooltip:{
        trigger: "none",
      },
      grid: {
          top: "20%",
          left: "10%",
          bottom: "0%"
      },
      xAxis: {
          show: false
      },
      yAxis: [{
              show: true,
              data: titlename,
              inverse: true,
              axisLine: {
                  show: false
              },
              splitLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  color: "#fff",

                  rich: {
                      lg: {
                          backgroundColor: "#339911",
                          color: "#fff",
                          borderRadius: 15,
                          // padding: 5,
                          align: "center",
                          width: 15,
                          height: 15
                      }
                  }
              }
          },
          {
              show: false,
              inverse: true,
              data: valdata,
              axisLabel: {
                  textStyle: {
                      fontSize: 12,
                      color: "#fff"
                  }
              }
          }
      ],
      series: [{
              name: "条",
              type: "bar",
              yAxisIndex: 0,
              data: data,
              barCategoryGap: 50,
              barWidth: 10,
              itemStyle: {
                  normal: {
                    borderRadius: 20,
                      color: function(params) {
                          var num = myColor.length;
                          return myColor[params.dataIndex % num];
                      }
                  }
              },
              label: {
                  normal: {
                      show: true,
                      position: "inside",
                      formatter: "{c}%"
                  }
              }
          },
          {
              name: "框",
              type: "bar",
              yAxisIndex: 1,
              barCategoryGap: 50,
              data: [100, 100, 100, 100, 100],
              barWidth: 15,
              itemStyle: {
                  normal: {
                      color: "none",
                      borderColor: "#00c1de",
                      borderWidth: 3,
                      borderRadius: 15
                  }
              }
          }
      ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
      myChart.resize();
  });
}

export function lineTwoinit(){
  var myChart = echarts.init(document.querySelector(".line1 .chart"));

 var option = {
  title:{
    text: '收入/支出',
    textStyle:{
     color:'white',
     fontSize:'14',
    }
  },
      tooltip: {
          trigger: "axis",
          axisPointer: {
              lineStyle: {
                  color: "#dddc6b"
              }
          }
      },
      legend: {
          right: "10%",
          textStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: "12"
          }
      },
      grid: {
          left: "10",
          top: "30%",
          right: "10",
          bottom: "0",
          containLabel: true
      },

      xAxis: [{
              type: "category",
              boundaryGap: false,
              axisLabel: {
                  textStyle: {
                      color: "rgba(255,255,255,.6)",
                      fontSize: 12
                  }
              },
              axisLine: {
                  lineStyle: {
                      color: "rgba(255,255,255,.2)"
                  }
              },

              data: [
                  "01",
                  "02",
                  "03",
                  "04",
                  "05",
                  "06",
                  "07",
                  "08",
                  "09",
                  "11",
                  "12",
                  "13",
                  "14",
                  "15",
                  "16",
                  "17",
                  "18",
                  "19",
                  "20",
                  "21",
                  "22",
                  "23",
                  "24",
                  "25",
                  "26",
                  "27",
                  "28",
                  "29",
                  "30"
              ]
          },
          {
              axisPointer: {
                  show: false
              },
              axisLine: {
                  show: false
              },
              position: "bottom",
              offset: 20
          }
      ],

      yAxis: [{
          type: "value",
          axisTick: {
              show: false
          },
          axisLine: {
              lineStyle: {
                  color: "rgba(255,255,255,.1)"
              }
          },
          axisLabel: {
              textStyle: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: 12
              }
          },

          splitLine: {
              lineStyle: {
                  color: "rgba(255,255,255,.1)"
              }
          }
      }],
      series: [{
              name: "收入",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                  normal: {
                      color: "#0184d5",
                      width: 2
                  }
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [{
                                  offset: 0,
                                  color: "rgba(1, 132, 213, 0.4)"
                              },
                              {
                                  offset: 0.8,
                                  color: "rgba(1, 132, 213, 0.1)"
                              }
                          ],
                          false
                      ),
                      shadowColor: "rgba(0, 0, 0, 0.1)"
                  }
              },
              itemStyle: {
                  normal: {
                      color: "#0184d5",
                      borderColor: "rgba(221, 220, 107, .1)",
                      borderWidth: 12
                  }
              },
              data: [
                  999,
                  900,
                  950,
                  910,
                  880,
                  870,
                  850,
                  1000,
                  1200,
                  555,
                  666,
                  1100,
                  333,
                  456,
                  765,
                  876,
                  222,
                  111,
                  949,
                  898,
                  767,
                  366,
                  755,
                  244,
                  933,
                  122,
                  1110,
                  709,
                  898,
                  717,
              ]
          },
          {
              name: "支出",
              type: "line",
              smooth: true,
              symbol: "circle",
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                  normal: {
                      color: "#00d887",
                      width: 2
                  }
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [{
                                  offset: 0,
                                  color: "rgba(0, 216, 135, 0.4)"
                              },
                              {
                                  offset: 0.8,
                                  color: "rgba(0, 216, 135, 0.1)"
                              }
                          ],
                          false
                      ),
                      shadowColor: "rgba(0, 0, 0, 0.1)"
                  }
              },
              itemStyle: {
                  normal: {
                      color: "#00d887",
                      borderColor: "rgba(221, 220, 107, .1)",
                      borderWidth: 12
                  }
              },
              data: [
                778,
                277,
                366,
                655,
                244,
                1233,
                722,
                911,
                588,
                377,
                866,
                255,
                144,
                933,
                1022,
                911,
                388,
                677,
                266,
                955,
                344,
                333,
                122,
                110,
                788,
                507,
                306,
                455,
                294,
              ]
          }
      ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
      myChart.resize();
  });
}

export function pieTwoinit(){

    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie1  .chart"));
    // 2. 指定配置项和数据
    var option = {
      title:{
        text: '省份分析',
        textStyle:{
         color:'white',
         fontSize:'14',
        }
      },
      grid: {
        left: "0",
        top: "10%",
        right: "0",
        bottom: "0",
        containLabel: true
    },
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [{
            name: "点位统计",
            type: "pie",
            // 如果radius是百分比则必须加引号
            radius: ["10%", "70%"],
            center: ["50%", "42%"],
            roseType: "radius",
            data: [{
                    value: 20,
                    name: "西安"
                },
                {
                    value: 26,
                    name: "北京"
                },
                {
                    value: 24,
                    name: "上海"
                },
                {
                    value: 25,
                    name: "其他"
                },
                {
                    value: 20,
                    name: "武汉"
                },
                {
                    value: 25,
                    name: "杭州"
                },
                {
                    value: 30,
                    name: "深圳"
                },
                {
                    value: 42,
                    name: "广州"
                }
            ],
            // 修饰饼形图文字相关的样式 label对象
            label: {
                fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
                // 连接到图形的线长度
                length: 10,
                // 连接到文字的线长度
                length2: 10
            }
        }]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
}

export function chinainit(){
    var myChart = echarts.init(document.querySelector('.map .chart'));
    echarts.registerMap("china", chinaJson); //注册可用的地图
    const option = {
      //浮动提示框
      // title: { text: '全国各地信息统计情况',left: "4%",top: "3%"},
      tooltip: {
        backgroundColor: "rgba(6, 43, 182,0.7)",
        textStyle: { color: "#fff" },
        formatter(params, ticket, callback) {
          // params.data 就是series配置项中的data数据遍历
          console.log('params',params);
          let value = 999,
            rukuNum = 888,
            chukuNum = 111;
          if (params.data) {
            value = params.data.value;
            // rukuNum = params.data.rukuNum;
            // chukuNum = params.data.chukuNum;
          }
          let html = `<div>交易金额：${value}元</div>`;
          return html;
        },
      },
      // visualMap: {
      //   type: "piecewise",
      //   min:0,
      //   max:5000,
      //   itemWidth: 40,
      //   bottom:60,left:20,
      //   pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
      //     {gt: 900, lt: 1000, label: '900-1000', color: '#6ad86e'}, // (900, 1000]
      //     {gt: 500, lt: 900, label: '500-900', color: '#9adcfa'}, // (500, 900]
      //     {gt: 310, lt: 500, label: '310-500', color: '#ffeb3b'}, // (310, 500]
      //     {gt: 100, lt: 300, label: '100-300', color: '#ff9800'}, // (200, 300]
      //     {gt: 0, lt: 100, label: '>100', color: 'orangered'} // (10, 200]
      //   ]
      // },
      geo: {
        map: "china",
        zoom: 1.2,
        aspectScale: 0.75,
        show: true,
        roam: true,
        label: {
          show: true,
          color: "white",
          fontSize: 10,
        },
  
        itemStyle: {
          //地图区域的多边形 图形样式
          borderColor: "rgba(0, 0, 0, 0.2)", //描边颜色
          areaColor: "rgba(43, 196, 243, 0.7)", //地图的背景色
          borderWidth: 1, //描边线宽
        },
        emphasis: {
          // 高亮状态下的多边形和标签样式
          shadowBlur: 0,//文字快的北京阴影长度
          focus: "self",//移入只显示高亮的省份
          areaColor: "#f39c12",
          shadowColor: "rgba(0, 0, 0, 0.5)",
          label: {
            color: "white",
            fontSize: 12,
          },
        },
      },
  
      series: [
        {
          name: "",
          type: "map",
          geoIndex: 0,
          label: { show: true },
           colorBy:'data',
          data: [
            { name: "北京市", value: 42, rukuNum: 42, chukuNum: 8 },
            { name: "上海市", value: 688, rukuNum: 688, chukuNum: 299 },
            { name: "黑龙江省", value: 7, rukuNum: 7, chukuNum: 0 },
            { name: "辽宁省", value: 2341,},
            { name: "吉林省", value: 9876,},
            { name: "内蒙古自治区", value: 199,},
            { name: "新疆维吾尔自治区", value: 99,},
            { name: "西藏自治区", value: 660,},
            { name: "青海省", value: 481,},
            { name: "甘肃省", value: 863,},
            { name: "云南省", value: 1999,},
            { name: "四川省", value: 9876,},
            { name: "宁夏回族自治区", value: 950,},
            { name: "山西省", value: 864,},
            { name: "陕西省", value: 1999,},
            { name: "重庆市", value: 9800,},
            { name: "贵州省", value: 1870,},
            { name: "湖北省", value: 20897,},
            { name: "湖南省", value: 18986,},
            { name: "河南省", value: 9273,},
            { name: "河北省", value: 28732,},
            { name: "广西壮族自治区", value: 8989,},
            { name: "广东省", value: 99238,},
            { name: "澳门特别行政区", value: 99,},
            { name: "香港特别行政区", value:22,},
            { name: "海南省", value: 9876,},
            { name: "台湾省", value: 888,},
            { name: "福建省", value: 98754,},
            { name: "江西省", value: 12832,},
            { name: "浙江省", value: 28892,},
            { name: "安徽省", value: 28371,},
            { name: "江苏省", value:19832,},
            { name: "山东省", value: 8767,},
            { name: "天津市", value: 23981,},
            { name: "北京市", value: 87654,},
          ],
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });

}

